<template>
  <div v-if="userInfo" class="comment_detail_reply">
    <div
      ref="contentRef"
      class="input_div"
      contenteditable
      @blur="blur()"
      @copy="copy()"
      @focus="focus()"
      @input="input"
      @paste="paste"
    ></div>
    <label
      :class="{ w55: reply.length }"
      class="submit_btn"
      type="primary"
      @click="submit()"
    >
      <Loading v-if="loading" color="#1989fa" />
      <span v-else>发送</span>
    </label>
    <p v-show="!reply.length" class="placeholder">
      <van-icon name="edit" />
      {{ isReplyChild ? "回复 " + replyTo.nickName : "请输入评论内容" }}
    </p>
  </div>
</template>

<script setup>
import { saveComment } from "@/server/business/comment.js";
import { getDeviceInfo, htmlToStr, insertTextNodeForPaste, getSource } from "@/utils/common.js";
import { Loading, showNotify } from "vant";
import { computed, defineProps, ref } from "vue";

const prop = defineProps(["replyTo", "userInfo", "commentInfo"]);
const emit = defineEmits(["callback", "clearReply"]);
const reply = ref("");
const sysData = {};
const loading = ref(false);
const contentRef = ref();
const replyTo = computed(() => {
  return prop.replyTo || prop.commentInfo;
});
const isReplyChild = computed(() => {
  return !!prop.replyTo;
});
// 聚焦
const focus = () => {
};
// 失焦
const blur = () => {
  if (!reply.value) emit("clearReply");
};
// 更新输入值
const input = (event) => {
  reply.value = event.target.innerHTML;
};
// 粘贴
const paste = async (event) => {
  event.preventDefault();
  insertTextNodeForPaste(event);
};
// 复制
const copy = () => {
  console.log("copy");
};
// 提交
const submit = () => {
  if (loading.value) return;
  let str = isReplyChild.value ? (`<span>回复 </span><span class="desc">${replyTo.value.nickName}：</span>` + reply.value) : reply.value;
  let params = {
    appraiseId: prop.commentInfo.appraiseId,
    commentTime: new Date().getTime(),
    commentby: prop.userInfo.pkMember,
    nickName: prop.userInfo.name,
    parentCommentId: prop.commentInfo.commentId,
    textComment: htmlToStr(str),
    checkTokenUser: prop.userInfo,
    subjectId: prop.commentInfo.subjectId || "",
    subjectId1: prop.commentInfo.subjectId1 || "",
    subjectId2: prop.commentInfo.subjectId2 || "",
    subjectId3: prop.commentInfo.subjectId3 || "",
    subjectId4: prop.commentInfo.subjectId4 || "",
    subjectId5: prop.commentInfo.subjectId5 || "",
    subjectId6: prop.commentInfo.subjectId6 || "",
    ...sysData
  };
  loading.value = true;
  saveComment(params)
    .then(() => {
      showNotify({ type: "success", message: "回复成功" });
      loading.value = false;
      contentRef.value.innerHTML = "";
      reply.value = "";
      emit("callback");
    })
    .catch(() => (loading.value = false));
};
// 采集系统数据
const getSysData = () => {
  getSource().then((type) => {
    sysData.appraiseSource = type || "h5";
  });
  const mobileInfo = getDeviceInfo();
  sysData.browseType = mobileInfo.browseType;
  sysData.deviceType = mobileInfo.model;
  sysData.osVersion = mobileInfo.os;
};
getSysData();
</script>

<style scoped>
.comment_detail_reply {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: flex-end;
  background: var(--van-white);
  box-shadow: 0 0 0.2rem 0 rgba(31, 31, 31, 0.09);
  position: relative;
}

.input_div {
  min-height: 3rem;
  line-height: 3rem;
  max-height: 21rem;
  padding: 0.5rem 1rem;
  border: none;
  outline: none;
  overflow: hidden;
  overflow-y: auto;
  flex: 1;
  background: rgba(90, 90, 99, 0.07);
  position: relative;
  z-index: 9;
}

.submit_btn {
  margin-left: 0.5rem;
  height: 4rem;
  transition: width 0.2s;
  width: 0;
  overflow: hidden;
  line-height: 4rem;
  color: var(--van-blue);
  background: none;
  border-radius: 0.4rem;
  text-align: center;
}

.submit_btn:hover {
  background: none;
}

.w55 {
  width: 5.5rem;
}

.placeholder {
  position: absolute;
  z-index: 8;
  left: 2.5rem;
  top: 2rem;
  color: #999999;
}
</style>
